<template>
	<div id="Home">
		<el-container>
			<el-header>
                <div class="logo"></div>
                <el-button type="danger" round size="mini" 
                    style="width:40px;height:40px;font-size:18px;position: absolute;right: 20px;top: 10px;"
                    @click="logout"
                    >
                    <i class="fa fa-sign-out"></i>
                </el-button>
            </el-header>
			<el-container>
				
				<el-aside width="200px">
					<nav-aside/>
				</el-aside>
				
				<el-main>
					<router-view/>
				</el-main>
			</el-container>
		</el-container>
	</div>

</template>

<script>
	import NavAside from './NavAside'
	export default {
		components:{NavAside},
		methods: {
			logout() {
				var action = () => {
					localStorage.clear();
					this.$router.push('/Signin');
				}
				this.operatorConfirm(action, '退出');
			}
		}
	}
</script>

<style lang="scss" scoped>
	#Home {
		width: 100%;
		height: 100%;
		.el-container {
			width: 100%;
			height: 100%;
		}
		.el-header,
		.el-footer {
			background-color: #B3C0D1;
			color: #333;
			text-align: center;
		}
		.el-aside {
			background-color: #D3DCE6;
			color: #333;
			text-align: center;
		}
		.el-main {
			background-color: #E9EEF3;
			color: #333;
		}
		body>.el-container {
			margin-bottom: 40px;
		}
	}
</style>